import { Tag, Input } from 'antd';
import { TweenOneGroup } from 'rc-tween-one';
import { PlusOutlined } from '@ant-design/icons';
import { FC, useEffect, useRef, useState } from 'react';
import { toArray } from '@/biz-components/_common/util';

export interface EditableTagGroupProps {
  value?: string[];
  onChange?: (val: string[]) => void;
  editable?: boolean;
}

const EditableTagGroup: FC<EditableTagGroupProps> = ({ onChange, value, editable }) => {
  const [tags, setTags] = useState<string[]>([]);

  const [inputVisible, setInputVisible] = useState(false);

  const [inputValue, setInputValue] = useState<string | undefined>(undefined);

  const inputRef = useRef();

  const triggerChange = (changedValue: any) => {
    if (onChange) {
      onChange(changedValue);
    } else {
      setTags(changedValue);
    }
  };

  const handleClose = (removedTag: string) => {
    const newTags = tags.filter((tag) => tag !== removedTag);

    triggerChange(newTags);
  };

  const showInput = () => {
    setInputVisible(true);
  };

  useEffect(() => {
    if (inputVisible) {
      inputRef.current?.focus();
    }
  }, [inputVisible]);

  const handleInputChange = (e) => {
    setInputValue(e.target.value);
  };

  const handleInputConfirm = () => {
    let newTags: string[] = [];

    if (inputValue && tags.indexOf(inputValue) === -1) {
      newTags = [...tags, inputValue];
    }

    triggerChange(newTags);

    setInputValue(undefined);

    setInputVisible(false);
  };

  useEffect(() => {
    setTags(Array.isArray(value) ? value : []);
  }, [value]);

  const forMap = (tag: string) => {
    const tagElem = (
      <Tag
        closable={editable}
        onClose={(e) => {
          e.preventDefault();
          handleClose(tag);
        }}
      >
        {tag}
      </Tag>
    );
    return (
      <span key={tag} style={{ display: 'inline-block' }}>
        {tagElem}
      </span>
    );
  };

  const tagChild = toArray(tags).map(forMap);

  return editable ? (
    <>
      <div>
        <TweenOneGroup
          enter={{
            scale: 0.8,
            opacity: 0,
            type: 'from',
            duration: 100,
            onComplete: (e) => {
              e.target.style = '';
            },
          }}
          leave={{ opacity: 0, width: 0, scale: 0, duration: 200 }}
          appear={false}
        >
          {tagChild}
        </TweenOneGroup>
      </div>
      {inputVisible && (
        <Input
          ref={inputRef}
          type="text"
          size="small"
          style={{ width: 78 }}
          value={inputValue}
          onChange={handleInputChange}
          onBlur={handleInputConfirm}
          onPressEnter={handleInputConfirm}
        />
      )}
      {!inputVisible && (
        <Tag onClick={showInput} className="site-tag-plus">
          <PlusOutlined /> New Tag
        </Tag>
      )}
    </>
  ) : (
    tagChild
  );
};

EditableTagGroup.defaultProps = {
  editable: true,
};

export default EditableTagGroup;



// 行为






